<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisible"
            :width="width"
            :title="title"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            v-dialogDrag
            class="dialog-main"
            :modal='false'
            >
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="110px" class="demo-ruleForm" size="mini" slot="center">
                    <el-form-item label="消息来源:" prop="origin"> 
                        <el-input v-model="ruleForm.origin" size="mini" :disabled="disableEdit" @change="changeID" ></el-input>
                    </el-form-item>
                    <el-form-item label="配置Title:" prop="title"> 
                        <el-input v-model="ruleForm.title" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="模板ID:" prop="cardTemplateId" v-if="ruleForm.messageType == 1 || ruleForm.messageType == 2"> 
                        <el-input v-model="ruleForm.cardTemplateId" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="消息类型:" prop="messageType"> 
                        <el-select v-model="ruleForm.messageType"
                            size='mini'
                            placeholder="选择消息类型"      
                            >
                            <el-option v-for="item in messageTypeList"
                                :key="item.label"
                                :label="item.name"
                                :value="item.label"
                                >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发送设置:" prop="sendType"> 
                         <el-select v-model="ruleForm.sendType"
                            size='mini'
                            placeholder="选择消息类型"   
                            multiple   
                            >
                            <el-option v-for="item in sendTypeList"
                                :key="item.label"
                                :label="item.name"
                                :value="item.label"
                                >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="来源状态:" prop="status"> 
                         <el-select v-model="ruleForm.status"
                            size='mini'
                            placeholder="选择消息类型"      
                            >
                            <el-option v-for="item in statusList"
                                :key="item.label"
                                :label="item.name"
                                :value="item.label"
                                >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="配置人员:" prop="employeeList"> 
                        <el-tag
                            v-for="(tag,index) in ruleForm.employeeList"
                            :key="tag.name + tag.id"
                            closable
                             @close="handleClose(index,1)"
                            size="mini"
                            style="margin-right:5px"
                            >
                            {{tag.name}} 
                        </el-tag>
                        <el-button class="button-new-tag" size="mini" @click="openSelectDialog(ruleForm.employeeList,1)">+</el-button>
                    </el-form-item>
                    <el-form-item label="配置角色:" prop="roleList"> 
                            <el-tag
                                v-for="(tag,index) in ruleForm.roleList"
                                :key="tag.name + tag.id"
                                closable
                                size="mini"
                                @close="handleClose(index,2)"
                                style="margin-right:5px"
                            >
                                {{tag.name}} 
                            </el-tag>
                            <el-button class="button-new-tag" size="mini" @click="openSelectDialog(ruleForm.roleList,3)">+</el-button>
                        </el-form-item>
                    <el-form-item label="配置群聊:" prop="chatList"> 
                         <el-tag
                            v-for="(tag,index) in ruleForm.chatList"
                            :key="tag.name + tag.id"
                            closable
                            @close="handleClose(index,3)"
                            size="mini"
                            style="margin-right:5px"
                        >
                            {{tag.name}} 
                        </el-tag>
                        <el-button class="button-new-tag" size="mini" @click="openSelectDialog(ruleForm.chatList,2)">+</el-button>
                    </el-form-item>
                    <el-form-item label="备注:" prop="note"> 
                        <el-input v-model="ruleForm.note" size="mini" type="textarea" rows="3"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="successDing('formName')" size="mini" type="primary">确 定</el-button>
                <el-button @click="closeCommonDialog()" size="mini">取 消</el-button>
            </span>
        </el-dialog>
        <multipleSelePdialog ref="multipleSelePdialog" @getSelectMulList="getSelectMulList"></multipleSelePdialog>
    </div>
</template>
<script>
import multipleSelePdialog from '@/components/messageSourceConfig/multipleSelePdialog'
import { saveDingSendOrigin,getDingChatDefByPage,getListEmployeeByPage,getDingSendOriginByOrigin } from '@/api/user.js'
export default {
    components:{
        multipleSelePdialog,
    },
    data(){
        return {
            dialogVisible: false,
            disableEdit: false,
            title: '新建消息来源配置',
            ruleForm:{},
            chatIdsList:[],
            employeeIdsList:[],
            rules:{
                origin: [
                    { required: true, message: this.M2('请填写消息来源！'), trigger: 'blur' },
                ],
                title: [
                    { required: true, message: this.M2('请填写配置Title！'), trigger: 'blur' },
                ],
                messageType: [
                    { required: true, message: this.M2('请选择消息类型！'), trigger: 'blur' },
                ],
                sendType: [
                    { required: true, message: this.M2('请选择发送设置！'), trigger: 'blur' },
                ],
                status: [
                    { required: true, message: this.M2('请选择来源状态！'), trigger: 'blur' },
                ],
                cardTemplateId: [
                    { required: true, message: this.M2('请输入模板ID！'), trigger: 'blur' },
                ],
            },
            statusList:[
                {
                    name:'允许发送',
                    label:0,
                },
                {
                    name:'忽略',
                    label:1,
                },
                {
                    name:'禁用',
                    label:2,
                },
            ],
            messageTypeList:[
                {
                    name:'Markdown',
                    label:0,
                },
                {
                    name:'卡片',
                    label:1,
                },
                {
                    name:'审批',
                    label:2,
                },
            ],
            sendTypeList:[
                 {
                    name:'默认',
                    label:'0',
                },
                {
                    name:'检查',
                    label:'1',
                },
                {
                    name:'支持转发',
                    label:'2',
                },
            ],
        }
    },
    props:{
        titleText:{
            type:String,
            default:() => ('')
        },
        width:{
            type:String,
            default:() => ('770px')
        },
    },
    mounted(){
        this.init()
    },
    methods:{
        init(){
            let param = {
                pageNum:1,
                pageSize:50,
                search:null
            }
            getDingChatDefByPage(param).then(res => {
                this.chatIdsList = res.data.rows
            })
            let params = {
                pageNum:1,
                pageSize:50,
                empSearch:null
            }
            getListEmployeeByPage(params).then(res => {
                this.employeeIdsList = res.data.rows
            })
        },
        handleClose(index,type){
            if(type == 1){
                this.ruleForm.employeeList.splice(index,1)
            }else if(type == 2){
                this.ruleForm.roleList.splice(index,1)
            }else if(type == 3){
                this.ruleForm.chatList.splice(index,1)
            }
        },
        getSelectMulList(tagsList,val){
            if(val == 1){
                this.$set(this.ruleForm,'employeeList',tagsList)
            }else if(val == 2){
                this.$set(this.ruleForm,'chatList',tagsList)
            }else if(val == 3){
                this.$set(this.ruleForm,'roleList',tagsList)
            }
        },
        openSelectDialog(name,id){
            this.$refs.multipleSelePdialog.openCommonDialog(name,id)
        },
        changeID(val){
            let param = {
                origin:val
            }
            getDingSendOriginByOrigin(param).then(res => {
                if(res.data){
                    this.$confirm((`已有数据是否要修改？`), { 
                        confirmButtonText: this.M2('确定'),
                        cancelButtonText: this.M2('取消'),
                        type: 'warning'
                    }).then(() => {
                        if(res.data.employeeList && res.data.employeeList.length > 0){
                            res.data.employeeList.forEach(item => {
                                item.id = item.Id
                                item.name = item.Name
                            })
                        }
                        
                        this.$set(this.ruleForm,'origin',res.data.origin)
                        this.$set(this.ruleForm,'title',res.data.title)
                        this.$set(this.ruleForm,'cardTemplateId',res.data.cardTemplateId)
                        this.$set(this.ruleForm,'messageType',res.data.messageType)
                        this.$set(this.ruleForm,'status',res.data.status)
                        this.$set(this.ruleForm,'sendType',res.data.sendType ? res.data.sendType.split(',') : [])
                        this.$set(this.ruleForm,'employeeIds',res.data.employeeIds ? res.data.employeeIds.split(',') : [])
                        this.$set(this.ruleForm,'roleList',res.data.roleList)
                        this.$set(this.ruleForm,'chatIds',res.data.chatIds)
                        this.$set(this.ruleForm,'note',res.data.note)
                        this.$set(this.ruleForm,'employeeList',res.data.employeeList)
                        this.$set(this.ruleForm,'chatList',res.data.chatList)
                        this.$set(this.ruleForm,'chatNames',res.data.chatNames)
                    }).catch(() => {
                        this.$set(this.ruleForm,'id',null)
                        return
                    })
                }
            })
        },
        successDing(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.ruleForm.employeeList && this.ruleForm.employeeList.length > 0){
                        this.ruleForm.employeeList.forEach(item => {
                            item.Id = item.id
                            item.TrueName = item.name
                        })
                    }
                    
                    let param = {
                        origin:this.ruleForm.origin,
                        cardTemplateId:this.ruleForm.cardTemplateId,
                        title:this.ruleForm.title,
                        messageType:this.ruleForm.messageType,
                        sendType:this.ruleForm.sendType.join(','),
                        roleList:this.ruleForm.roleList,
                        status:this.ruleForm.status,
                        note:this.ruleForm.note,
                        employeeList:this.ruleForm.employeeList,
                        chatList:this.ruleForm.chatList,
                    }
                    saveDingSendOrigin(param).then(res => {
                        if(res.code == 200){
                            this.$message({
                                showClose: true,
                                message:'操作成功！',
                                offset:220,
                                duration: 2000,
                                type: 'success'
                            })
                            this.closeCommonDialog()
                            this.$emit('mainListList')
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        openCommonDialog(row){
            this.disableEdit = false
            
            if(row){
                this.title = `编辑消息来源配置`
                let param = {
                    origin:row.origin
                }
                getDingSendOriginByOrigin(param).then(res => {
                    if(res.data){
                        if(res.data.employeeList && res.data.employeeList.length > 0){
                            res.data.employeeList.forEach(el => {
                                el.id = el.Id
                                el.name = el.TrueName
                            });
                        }
                        this.ruleForm = {
                            origin:res.data.origin,
                            cardTemplateId:res.data.cardTemplateId,
                            title:res.data.title,
                            messageType:res.data.messageType,
                            status:res.data.status,
                            sendType:res.data.sendType ? res.data.sendType.split(',') : [],
                            employeeIds:res.data.employeeIds ? res.data.employeeIds.split(',') : [],
                            roleList:res.data.roleList,
                            chatIds:res.data.chatIds,
                            note:res.data.note,
                            employeeList:res.data.employeeList,
                            chatList:res.data.chatList,
                            chatNames:res.data.chatNames,
                        }
                        
                    }
                    this.disableEdit = true 
                })
            }else {
                this.title = '新建消息来源配置'
                this.$set(this.ruleForm,'origin',null)
                this.$set(this.ruleForm,'cardTemplateId',null)
                this.$set(this.ruleForm,'title',null)
                this.$set(this.ruleForm,'messageType',null)
                this.$set(this.ruleForm,'sendType',null)
                this.$set(this.ruleForm,'employeeIds',null)
                this.$set(this.ruleForm,'roleList',[])
                this.$set(this.ruleForm,'employeeList',[])
                this.$set(this.ruleForm,'chatList',[])
                this.$set(this.ruleForm,'chatIds',null)
                this.$set(this.ruleForm,'note',null)
                this.$set(this.ruleForm,'employeeNames',null)
                this.$set(this.ruleForm,'chatNames',null)
                this.$set(this.ruleForm,'status',null)
            }
            this.dialogVisible = true
        },
        closeCommonDialog(){
            this.$refs.formName.clearValidate()
            this.dialogVisible = false
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep.dialog-main{
    .el-dialog__header{
        border-bottom: 1px solid #ccc;
        padding: 10px !important;
        .el-dialog__title{
            font-weight: bold;
        }
    }
    .el-dialog__body{
        padding: 10px 20px 10px !important;
        overflow-y: auto;
        .button-new-tag {
            padding: 4px 10px;
        }
    }
    
}
</style>